<script setup lang="ts">
import tableList from "@/components/tableList/tableList.vue";
import {dataList,orderRefunds} from "@/api/order";
import {reactive, ref, onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from "element-plus";


const visible = ref()
const refundData = reactive({
  created_at: '',
  pay_status: '',
  remark: '',
  completion_time: '',
})
const refundText = ['退款中','已退款','退款关闭','退款异常','未知状态']
const router = useRouter()
let searchRef = ref('')
const searchForm = reactive({
  name: '',
})
let pageData = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0,
})
const loading = ref(false);
const tableData = reactive({data: []})
const tableHeader = reactive([
  {label: '学生姓名', prop: 'realname', width: '120px'},
  {label: '订单号', prop: 'order_no'},
  {
    label: '支付状态', prop: 'pay_status', type: 'html', code: (row) => {
      if (row.pay_status == 0) {
        return '<span style="color: #F56C6C">未支付</span>'
      } else if (row.pay_status == 1) {
        return '<span style="color: #67C23A">已支付</span>'
      } else if (row.pay_status == 2) {
        return '<span style="color: #F56C6C">支付失败</span>'
      } else if (row.pay_status == 3) {
        return '<span style="color: #F56C6C">已退款</span>'
      } else if (row.pay_status == 4) {
        return '<span style="color: #F56C6C">退款失败</span>'
      } else if (row.pay_status == 5) {
        return '<span style="color: #F56C6C">已过期</span>'
      }
    }
  },
  {label: '支付时间', prop: 'created_at'},
])

const tableOptions = {
  label: '操作',
  width: '170px',
  value: 0,
  options: [
    {
      label: '发起退款',
      show: (row) => {
        return row.pay_status == 1
      },
      method: (row) => {
        handleRefund(row)
      }
    },
    {
      label: '查看退款信息',
      show: (row) => {
        return row.pay_status == 3
      },
      method: (row) => {
        refundInfo(row)
      }
    },
  ]
}

const handleRefund = (row) => {
  ElMessageBox.confirm('是否发起退款,一旦确认无法取消', '提示', {type: 'warning'}).then(async () => {
    let res = await orderRefunds({order_no:row.order_no});
    if (res) {
      ElMessage({message: '发起退款成功', type: 'success'})
      await fetchData();
    }

  }).catch(() => {
  })
}

const refundInfo = (row) => {
  Object.assign(refundData, row.refund)
  visible.value = true
}

const handleReset = () => {
  searchRef.value.resetFields()
}

const onSearch = () => {
  pageData.currentPage = 1
  fetchData()
}

const fetchData = async () => {
  let params = searchForm
  params.page = pageData.currentPage
  params.limit = pageData.pageSize
  loading.value = true
  let res = await dataList(params);
  console.log('user', res)
  loading.value = false
  if (res) {
    tableData.data = res.data.list
    pageData.total = res.data.page.amount
  }
}

const handlePageChange = (param) => {
  pageData.pageSize = param.limit
  pageData.currentPage = param.page
  fetchData()
}

onMounted(() => {
  fetchData()
})

</script>

<template>
  <el-row justify="center">
    <el-col :span="18">
      <el-form :inline="true" :model="searchForm" class="el-input-form" ref="searchRef">
        <el-form-item label="学生姓名" prop="name">
          <el-input @keyup.enter="fetchData" clearable placeholder="请输入学生姓名" v-model="searchForm.name">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="onSearch" icon="search">查询</el-button>
          <el-button @click="handleReset" icon="RefreshRight">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col class="white-shadow" :span="18" v-loading="loading">
      <tableList :table-data="tableData.data"
                 :table-options="tableOptions"
                 :page-data="pageData"
                 @handle-page-change="handlePageChange"
                 :table-header="tableHeader"></tableList>
    </el-col>
  </el-row>
  <el-dialog v-model="visible" title="退款信息" draggable width="40%">
    <el-row justify="center">
      <el-col :span="20">
        <el-form label-width="120px" label-position="left">
          <el-form-item label="发起退款时间:">
            <span>{{ refundData.created_at }}</span>
          </el-form-item>
          <el-form-item label="退款状态:">
            <span>{{refundText[refundData.pay_status]  }}</span>
          </el-form-item>
          <el-form-item label="备注:">
            <span>{{ refundData.remark }}</span>
          </el-form-item>
          <el-form-item label="退款完成时间:">
            <span>{{ refundData.completion_time }}</span>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<style scoped lang="less">

</style>